<template>
  <div>
    <div class="flex justify-between padding-20">
      <div class="flex align-center">
        <span class="font-size-18 font-weight-700 padding-right-10">出租率</span>
        <!-- <span>80.15%</span> -->
      </div>
      <div class="project-select">
        <el-select v-model="projectKey" size="mini" placeholder="请选择项目" @change="changeProject">
          <el-option v-for="item in projectOptions" :key="item.projectKey" :label="item.projectName" :value="item.projectKey" />
        </el-select>
      </div>
    </div>
    <div class="flex justify-around">
      <div class="pie-box relative-box">
        <pie ref="pie1" :banLegendDefaultClick="true" :ch-config="pieConfig1"></pie>
        <div class="absolute-box flex-column align-center justify-center pie-content">
          <div class="font-size-32 font-weight-500 padding-top-15">{{ rentalSpaceRate | accMul }}%</div>
          <div class="padding-top-5 padding-bottom-20 flex align-center">
            <span class="color-666666">空间资产</span>
            <span v-tooltip="'空间资产'" class="question-box margin-left-5">?</span>
          </div>
        </div>
      </div>

      <div class="pie-box relative-box">
        <pie ref="pie2" :banLegendDefaultClick="true" :ch-config="pieConfig2"></pie>
        <div class="absolute-box flex-column align-center justify-center pie-content">
          <div class="font-size-32 font-weight-500 padding-top-15">{{ rentalFlatRate | accMul }}%</div>
          <div class="padding-top-5 padding-bottom-20 flex align-center">
            <span class="color-666666">平面资产</span>
            <span v-tooltip="'空间资产'" class="question-box margin-left-5">?</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Pie from '@c/echarts/pie';
  import { pieConfig } from '@js/echartsConfig';
  import { apiLeaseRate } from '../../../api/businessBuilding';
  import { accMul } from '@g/js/utils';

  export default {
    props: {
      projectOptions: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },

    data() {
      return {
        pieConfig1: null,
        pieConfig2: null,
        projectKey: '',
        rentalSpaceRate: 0,
        rentalFlatRate: 0,
      };
    },

    methods: {
      async initData(projectKey) {
        if (projectKey) {
          this.projectKey = projectKey;
        }
        let res = await apiLeaseRate({ projectId: projectKey || this.projectKey });
        this.initChartsData();
        this.rentalSpaceRate = res.spaceRent.rentalRate;
        this.rentalFlatRate = res.flatRent.rentalRate;

        let list1 = [
          { name: '占比', value: res.spaceRent.leasedValue || 0, color: '#29C37F' },
          { name: '未占比', value: res.spaceRent.leasedValue > 0 ? res.spaceRent.vacantValue || 0 : 100, color: '#EFEFEF' },
        ];
        list1.forEach(item => {
          this.pieConfig1.list.push(item);
          this.pieConfig1.color.push(item.color);
        });

        let list2 = [
          { name: '占比', value: res.flatRent.leasedValue || 0, color: '#29C37F' },
          { name: '未占比', value: res.flatRent.leasedValue > 0 ? res.flatRent.vacantValue || 0 : 100, color: '#EFEFEF' },
        ];
        list2.forEach(item => {
          this.pieConfig2.list.push(item);
          this.pieConfig2.color.push(item.color);
        });

        this.$refs.pie1.initChart();
        this.$refs.pie2.initChart();
      },

      changeProject() {
        this.initData();
      },

      //初始化饼状图
      initPie() {
        let _pieConfig = this.lodash.cloneDeep(pieConfig);
        _pieConfig.legend.show = false;
        _pieConfig.legend.center = ['50%', '50%']; //图形的中心点，['50%', '50%']就是盒子的最中心为原点
        _pieConfig.legend.radius = ['85%', '100%']; //第一个参数是从里往外扩，第二个参数是从外往里扩
        this.pieConfig1 = this.lodash.cloneDeep(_pieConfig);
        this.pieConfig2 = this.lodash.cloneDeep(_pieConfig);
      },

      initChartsData() {
        this.pieConfig1.list.splice(0, this.pieConfig1.list.length);
        this.pieConfig1.color.splice(0, this.pieConfig1.color.length);
        this.pieConfig2.list.splice(0, this.pieConfig2.list.length);
        this.pieConfig2.color.splice(0, this.pieConfig2.color.length);
      },
    },

    created() {
      this.initPie();
    },

    components: { Pie },
  };
</script>
<style scoped lang="scss">
  .pie-box {
    margin-top: 45px;
    width: 210px;
    height: 210px;
    .pie-content {
      width: 210px;
      height: 210px;
      left: 0;
      top: 0;
    }
  }
</style>
